<template>
  <el-form :inline="true" label-position="right"  label-width="140px" size="small" class="filter-form-inline">
    <el-row :gutter="40" style="margin-left: 0px;margin-right:0px;">
      <el-col :span="8">
        <el-form-item label="流程编号：" style="width: 100%;">
          {{ detailData.processNo }}
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="创建时间：" style="width: 100%;">
          {{ dateFormat('yyyy-mm-dd HH:MM',detailData.startTime) }}
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="创建人：" style="width: 100%;">
          {{ detailData.initiator }}
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="商销名称：">
          {{ detailData?.data?.sellerName }}
          {{ detailData?.data?.New?.sellerName }}
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="统一社会信用代码：">
          {{ detailData?.data?.creditCode }}
          {{ detailData?.data?.New?.creditCode }}
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="联系人：" style="width: 100%;">
          {{ detailData?.data?.userName }}
          {{ detailData?.data?.New?.userName }}
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="联系电话：" style="width: 100%;">
          {{ detailData?.data?.tel }}
          {{ detailData?.data?.New?.tel }}
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="企业所在地：" style="width: 100%;">
          <span v-if=" detailData?.data?.provinceName ">
            {{ detailData?.data?.provinceName }}/{{ detailData?.data?.cityName }}/{{ detailData?.data?.areaName }}
          </span>
          <span v-if=" detailData?.data?.New?.provinceName ">
            {{ detailData?.data?.New?.provinceName }}/{{ detailData?.data?.New?.cityName }}/{{ detailData?.data?.New?.areaName }}
          </span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="详细地址：" style="width: 100%;">
          {{ detailData?.data?.address }}
          {{ detailData?.data?.New?.address }}
        </el-form-item>
      </el-col>

      <el-col :span="24">
        <item-title title="资质信息" />
      </el-col>
      <el-col :span="24">
        <el-form-item prop="files" label-width="0">
          <div  class="qualityFiles-container">
            <div v-for="(item,index) in detailData?.data?.files" :key="index" class="file-item">
              <image-upload-view disabled="true" :data="item" />
            </div>
            <template v-if=" detailData?.data?.New?.files">
              <div v-for="(item,index) in detailData?.data?.New?.files" :key="index" class="file-item">
                <image-upload-view disabled="true" :data="item" />
              </div>
            </template>
          </div>
        </el-form-item>
      </el-col>

    </el-row>
  </el-form>
</template>

<script>
import { reactive, toRefs, watch } from "vue";

export default {
  props: {
    detailData: {
      type: Object,
      default() {
        return {
          data: {},
        };
      },
    },
  },
  setup(props, context) {
    const data = reactive({
      detailData: {},
    });

    watch(
      () => props.detailData,
      (newval, oldval) => {
        if (newval) {
          data.detailData = newval;
          console.log(newval);
        }
      },
      { immediate: true, deep: true }
    );

    return {
      ...toRefs(data),
    };
  },
};
</script>

<style lang="scss" scoped>
.qualityFiles-container {
  display: flex;
  flex-wrap: wrap;
}
</style>